<template>
    <v-container>
      <nav
      class="v-toolbar v-toolbar--absolute theme--dark"
      data-booted="true"
      style="margin-top: 0px; padding-right: 0px; padding-left: 300px; transform: translateY(0px);"
    >
      <div class="v-toolbar__content" style="height: 64px;">
        <div class="v-toolbar__title">Vuetify</div>
      </div>
    </nav>
    <main class="v-content" data-booted="true" style="padding: 64px 0px 32px 0px;">
      <div class="v-content__wrap">
        <div class="v-content fluid">
          <div class="layout align-center justfy-center">
          <div class="flex xs12">
            
              <v-flex align-center justify-center row fill-height xs8 offset-xs2>
        <v-content v-if="needCode==1" xs2>
            需要提取码
            <v-text-field            
      v-validate="'required|max:4|min:4'"
      v-model="eCode"
      :counter="4"
      :error-messages="errors.collect('eCode')"
      label="提取码"
      data-vv-name="eCode"
      required
    ></v-text-field>
    <v-btn @click="validateECode()">验证</v-btn>
        </v-content>


        
             <v-content  v-else-if="needCode==0">
            <v-data-table
            hide-actions
            :headers="headers"
            :items="fileInfo"
            >
            <template slot="items" slot-scope="props">
            <td class="text-xs-left">{{ props.item.filename }}</td>
            
            <td class="text-xs-left">{{ props.item.username }}</td>
        <td class="text-xs-left">{{ byteConvert(props.item.fileSize) }}</td>
        <td class="layout px-0" >
          <v-icon
            small
            class="mr-2"
            @click="downloadShareFile()"
          >
            mdi-download
          </v-icon>
          
        </td>
        </template>
            </v-data-table>          
            不需要
            
        </v-content>
        <v-content v-else>
       该分享不存在</v-content>
              </v-flex>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer
      class="v-footer v-footer--fixed v-footer--inset theme--dark"
      style="height: 32px; padding-left: 300px;"
    >
      <span class="px-3">© 2018</span>
    </footer>
    </v-container>
    
</template>
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
export default {
    name:'share',
      $_veeValidate: {
    validator: "new"
  },
    data: () => ({
        shareKey:'22',
        needCode:2,
        headers: [
        { text: '文件名', value: 'isFile' ,sortable: false},
        { text: '分享人', value: 'isFile' ,sortable: false},
        { text: '文件大小', value: 'isFile' ,sortable: false},
        { text: '下载', value: 'name', sortable: false }
        ],
        fileInfo:[],
        eCode:'',
            dictionary: {
      attributes: {
        email: "E-mail Address"
        // custom attributes
      },
      custom: {
        eCode: {
          required: () => "eCode can not be empty",
          max: "The name field may not be greater than 4 characters",
          min: "at least 4 words"
          // custom messages
        }
      }
    }

    }),
    created(){
       
    },
    mounted(){
//  this.getShareKey();
this.$validator.localize("en", this.dictionary);
 this.getNeedCode();
    },
    methods:{
        // getShareKey(){
        //     alert(this.$route.params.k);
        // },
        getNeedCode(){
            this.$http.post("/share/getShareFile/"+this.$route.params.k,{}).then(
                res=>{
                    if(res.data=="needCode"){
                        this.needCode=1;
                    }else if(res.data==''){
                        this.needCode=2;
                    }                    
                    else{
                        alert(res.data);
                        this.needCode=0;
                        this.fileInfo=res.data;
                    }
                }
            );
        },

        validateECode(){
            this.$validator.validateAll().then(
                res=>{
                    if(res){
                        this.checkEcode();
                    }
                    else{
                        alert("error");
                    }
                }
            )
        },

        checkEcode(){

            this.$http.post("/share/checkExtractCode/"+this.$route.params.k+"?extractCode="+this.eCode,{}).then(res=>{
                if(res.data){
                    this.needCode=0;
                    this.getFileInfoWithCode();
                }else{
                    this.needCode=1;
                    alert("提取码错误");
                }
            })
        },
        getFileInfoWithCode(){
            this.$http.post("/share/getShareFileWithCode/"+this.$route.params.k+"?extractCode="+this.eCode,{}).then(res=>{
                this.needCode=0;
                this.fileInfo=res.data;
            });
        },
        downloadShareFile(){
            window.location=encodeURI("/share/downloadShareFile/"+this.$route.params.k+"?extractCode="+this.eCode);
        }
        





    ,
    byteConvert :function(bytes) {
    if (isNaN(bytes)) {
        return '';
    }
    var symbols = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    var exp = Math.floor(Math.log(bytes)/Math.log(2));
    if (exp < 1) {
        exp = 0;
    }
    var i = Math.floor(exp / 10);
    bytes = bytes / Math.pow(2, 10 * i);

    if (bytes.toString().length > bytes.toFixed(2).toString().length) {
        bytes = bytes.toFixed(2);
    }
    return bytes + ' ' + symbols[i];
}
    }
}
</script>
